<%--
  Created by IntelliJ IDEA.
  User: ThinkPad
  Date: 2025/5/15
  Time: 8:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page pageEncoding="UTF-8" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>Title</title>
    <script src="./js/jquery-3.7.1.js"></script>
</head>
<body>
    <form id="addPetForm">
        <p>
            *昵称：<input type="text" name="petName">
        </p>
        <p>
            *品种：<select name="petBreed">
                <option value="">--请选择--</option>
                <c:forEach items="${breedList}" var="breed">
                    <option value="${breed.value}">${breed.name}</option>
                </c:forEach>
            </select>
        </p>
        <p>
            *性别：
            <c:forEach items="${sexList}" var="sex" varStatus="vs">
            <input <c:if test="${vs.index==0}">checked</c:if> type="radio" name="petSex" value="${sex.value}">${sex.name}
            </c:forEach>
        </p>
        <p>
            *出生日期：
            <input type="text" name="birthday"> yyyy-MM-dd
        </p>
        <p>
            宠物描述：<textarea name="description"></textarea>
        </p>
        <p>
            <input type="button" value="提交" onclick="savePet()">
            <input type="reset" value="重置">
        </p>
    </form>
    <script>
        $(function () {
            //当昵称输入框失去焦点时对昵称进行校验（查重）
            let petNameElement = document.querySelector('input[name="petName"]')
            petNameElement.addEventListener('blur',function () {
                let petName = petNameElement.value.trim()
                $.ajax({
                    url:"/petNameRepeatServlet",
                    data:{
                        petName:petName
                    },
                    type:"post",
                    dataType:"json",
                    success:function (result) {
                        if(result.code == 200){
                            if(result.data == true){
                                alert('昵称已存在!')
                            }
                        }else{
                            alert(result.msg)
                        }
                    }
                })
            })
        })
        //保存宠物
        function savePet() {
            //宠物昵称
            let petname = document.querySelector('input[name="petName"]').value.trim()
            //品种
            let petBreed = document.querySelector('select[name="petBreed"]').value
            //出生日期
            let birthday = document.querySelector('input[name="birthday"]').value.trim()
            //yyyy-MM-dd
            let reg = /^(\d{4})-(\d{2})-(\d{2})$/
            if(petname == ''){
                alert('昵称不能为空!')
            }else if(petBreed == ''){
                alert('品种不能为空!')
            }else if(!reg.test(birthday)){
                alert('出生日期必须是yyyy-MM-dd格式!')
            } else {
                //保存宠物信息
                // console.log($('#addPetForm').serialize())
                $.ajax({
                    url:"/savePetServlet",
                    data:$('#addPetForm').serialize(),
                    type:"post",
                    dataType:"json",
                    success:function (result) {
                        if(result.code == 200){
                            alert('宠物添加成功!')
                            location.href = <%= request.getContextPath() %>'/index.jsp'
                        }else{
                            alert(result.msg)
                        }
                    }
                })
            }
        }
    </script>
</body>
</html>
